import  React from "react";
import { Checkbox,Button } from 'antd';
import  "./TodoItem.css";

class TodoItem extends  React.Component{
  constructor(props){
    super(props);
    this.state = {
      todo:{}
    }
  }

  componentWillMount(){
    this.setState({
      todo:this.props.todo
    })
  }

  render(){
    return(
      <div className="todo_item_container">
        <div className="todo_item_check">
          <Checkbox checked={this.state.todo.status==="PENDDING"?false:true}
          onClick={(event)=>{
            console.log(event.target.checked);
            this.props.changeTodostatus({checked:event.target.checked,title:this.props.todo.title})
          }}/>
        </div>
        <div className="todo_item_title">{this.props.todo.title}</div>
        <div className="todo_item_button">
          <Button type="primary" danger
          onClick={()=>{
            this.props.deleteTodo({title:this.props.todo.title})
          }}>
          删除
          </Button>
        </div>
      </div>
    )
  }

  componentWillReceiveProps(props){
    console.log(props)
    this.props = props;
    this.setState({
      todo:this.props.todo
    })
  }
}

export default  TodoItem;